<template>
    <div>
      <router-view></router-view>
      <div class="footer">
        <div v-for="(item,index) in items" @click="foot(item.push,index)">
          <img :src="n==index?item.iconSelect:item.icon" alt="">
          <p :class="n==index?'bluez':'grayz'">{{item.name}}</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Footer",
      data(){
          return{
            items:[{
              cls:"home",
              name:"首页",
              push:"/",
              icon:require("../../assets/img/shouyehui.png"),
              iconSelect:require("../../assets/img/shouyelan.png")
            },
						{
							cls:"shares",
							name:"发现",
							push:"/found",
							icon:require("../../assets/img/tab/faxianhui.png"),
							iconSelect:require("../../assets/img/tab/faxianlan.png")
						},
						{
							cla:"community",
							name:"资讯",
							// name:"题库",
							push:"/zixun",
							icon:require("../../assets/img/tab/zixun1.png"),
							iconSelect:require("../../assets/img/tab/zixunactive.png")
						},
						{
							cla:"mine",
							name:"我的",
							push:"/user",
							icon:require("../../assets/img/tab/wodehui.png"),
							iconSelect:require("../../assets/img/tab/wodelan.png")
						}],
            n:'',
            s:'nihao'
          }
      },
      methods:{
        foot(r,index){
          this.n = index
          this.$router.push({
            path:r
          })
        }
      },
      mounted() {

          if (this.$route.path == '/'){
            this.n = 0
          }else if (this.$route.path == '/user'){
            this.n = 3
          } else if(this.$route.path == '/found'){
            this.n = 1
          }else {
            this.n = 2
          }
        // console.log(this.$route.path)
        // console.log(this.n)
      },
    }
</script>

<style scoped>
    .footer{
      width: 7.5rem;
      height:0.98rem;
      background:rgba(255,255,255,1);
      box-shadow:0 -0.03rem 0.05rem 0 rgba(71,68,80,0.06);
      opacity:0.95;
      position: fixed;
      bottom: 0;
      z-index: 999;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  .footer div{
    text-align: center;
    font-size:0.24rem;
  }
  .footer div img{
    width: 0.5rem;
  }
  .grayz{
    color:rgba(194,201,211,1);
  }
  .bluez{
    color:rgba(2,135,255,1);
  }
</style>
